<!DOCTYPE html>
<!--
Copyright 2010 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Original slides:
Marcin Wichary (mwichary)

Modifications:
Ernest Delgado (ernestd)
Alex Russell (slightlyoff)
Mihai Ionescu (mihai)
Arne Roomann-Kurrik (kurrik)
Iñigo Jimenez (inigojimenez)
-->
<html>
    <head>
        <title>HTML5 presentation</title>       
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />     
        <meta charset="utf-8" />  
        <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />             
        
        <script src="static/js/jquery.min.js">
        </script>
        <script src="static/js/box2d.min.js"></script>
        <script src="static/js/slide-presentation.js">
        </script>
        <script src="static/js/slide-content.js">
        </script>
        <script src="static/js/worker-lib.js">
        </script>
        <link rel="stylesheet" href="static/css/slide-presentation.css" />
        <link rel="stylesheet" href="static/css/slide-content.css" />
        <link href='http://fonts.googleapis.com/css?family=Molengo|Yanone+Kaffeesatz|Droid+Serif|OFL+Sorts+Mill+Goudy+TT|Inconsolata|Lobster|Cantal|Josefin+Sans+Std+Light' rel='stylesheet' type='text/css'>
    </head>
    <body>       
        <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
        <div class="presentation">
            <div class="slides">

                <!--
                *
                * Preflight
                *
                -->
                <div class="slide transitionSlide" id="slide-preflight">
                    <section class="flex vbox boxcenter">
                        <h2>Preflight</h2>
                        <div id="feature-webgl" class="hidden good feature">
                            <div>
                                <img src='static/images/icon-ok.png'/> WebGL is enabled
                            </div>
                        </div>
                        <div id="feature-no-webgl" class="hidden bad feature">
                            <div>
                                <img src='static/images/icon-error.png'/> WebGL is disabled
                            </div>
                            <div class="explanation">
                                You will not be able to see the WebGL demo
                                later in the slide deck.  If using Google Chrome, you will likely
                                need to run the Chrome executable using the
                                <code>
                                    --enable-webgl
                                </code> flag.
                            </div>
                        </div>
                        <div id="browser-webkit" class="hidden good feature">
                            <div>
                                <img src='static/images/icon-ok.png'/> Webkit
                            </div>
                            <div class="explanation">
                                If using Google Chrome, you will likely need the Dev channel to see
                                all of the functionality in this presentation.  If you are using
                                Safari, you will likely need a nightly build of Webkit in order to
                                see all of the functionality in this presentation.
                            </div>
                        </div>
                        <div id="browser-mozilla" class="hidden warning feature">
                            <div>
                                <img src='static/images/icon-warning.png'/> Mozilla
                            </div>
                            <div class="explanation">
                                You are running a Mozilla browser.  While such browsers generally have
                                excellent support for HTML5 features, this presentation has only
                                been tested using Webkit browsers such as
                                <a href="http://www.google.com/chrome">Google Chrome</a> or
                                <a href="http://www.apple.com/safari/">Safari</a>.
                                Eventually we hope to add Mozilla as a supported browser for this
                                presentation.
                            </div>
                        </div>
                        <div id="browser-other" class="hidden bad feature">
                            <div>
                                <img src='static/images/icon-error.png'/> Other browser
                            </div>
                            <div class="explanation">
                                You are running a browser that has not been tested with this
                                presentation.  You may not be able to run some or all of the samples
                                listed here.  While we want to add support for as many browsers as
                                possible, currently we only support Webkit-based browsers such as
                                <a href="http://www.google.com/chrome">Google Chrome</a> or
                                <a href="http://www.apple.com/safari/">Safari</a>.
                            </div>
                        </div>
                        <div id="feature-notification" class="hidden">
                            <div id="notification-on" class='hidden warning feature'>
                                <div>
                                    <img src='static/images/icon-warning.png'/> Notification permission incorrect
                                </div>
                                <div class="explanation">
                                    You have granted permission for this page to show notifications.
                                    If you intended to demo the request permission functionality, you
                                    may want to clear this permission by clicking
                                    <a href="javascript:resetNotifications();">here</a> and removing
                                    the permission.
                                </div>
                            </div>
                            <div id="notification-off" class='hidden good feature'>
                                <div>
                                    <img src='static/images/icon-ok.png'/> Notification permission correct
                                </div>
                            </div>
                        </div>
                        <div id="feature-no-notification" class="hidden bad feature">
                            <div>
                                <img src='static/images/icon-error.png'/> No notification
                            </div>
                            <div class="explanation">
                                Your browser does not support displaying notifications.  Currently,
                                only <a href="http://www.google.com/chrome">Google Chrome</a>
                                will support this functionality.
                            </div>
                        </div>
                </div>
            </div>
            <script>
                function hide(id) {
                    $('#' + id).addClass('hidden');
                }

                function unhide(id) {
                    $('#' + id).removeClass('hidden');
                };

                function checkWebGL() {
                    try {
                        var canvas = document.createElement('canvas');
                        var context = canvas.getContext('experimental-webgl');
                        if (context) {
                            unhide('feature-webgl');
                            return;
                        }
                    } catch(e) {
                    }
                    unhide('feature-no-webgl');
                };

                function checkBrowser() {
                    if ($.browser.webkit) {
                        unhide('browser-webkit');
                    } else if ($.browser.mozilla) {
                        unhide('browser-mozilla');
                    } else {
                        unhide('browser-other');
                    }
                };

                function resetNotifications() {
                    webkitNotifications.requestPermission( function() {
                        window.location.reload();
                    });
                };

                function checkNotifications() {
                    if (!window.hasOwnProperty('webkitNotifications')) {
                        unhide('feature-no-notification');
                    } else {
                        unhide('feature-notification');
                        if (webkitNotifications.checkPermission() == 0) {
                            unhide('notification-on');
                        } else {
                            unhide('notification-off');
                        }
                    }
                };

                $(document).ready( function() {
                    checkBrowser();
                    checkWebGL();
                    checkNotifications();
                });
            </script>
            <!--
            *
            * Google I/O Logo
            *
            -->
            <div class="slide" id="slide-logo">
                <section class="center intro">
                    <img class="logoBigImage" src="static/images/google_io_big.png" />
                    <img class="logoFooterImage" src="static/images/google_io_footer.png" />
                </section>
            </div>
            <!--
            *
            * Session Title
            *
            -->
            <div class="slide">
                <section class="center">
                    <div class="titleContent">
                        <h2 class="titleTitle">
                        Developing With <strong class="html5">HTML5</strong>
                        </h2>
						<p><b>MADPIXEL</b> www.madpixel.es</p>
                        <p class="titleText">
                            Iñigo Jiménez&nbsp;&nbsp;(<span class="chromabrush">@inigojimenez</span>)
                            <br/>
                            Iñaki Arredondo&nbsp;&nbsp;(<span class="chromabrush">@inakiarredondo</span>)
                            <br/>
                            <br/>
                            November 2010
                        </p>
                    </div>
                </section>
            </div>
            <!--
            *
            * Presentation Info
            *
            -->
            <div class="slide">
                <section class="hbox boxcenter">
                    <div class="noflex vbox">
                        <p class="">
                            This presentation was built using <span class="html5">HTML5</span>
                        </p>
                        <p>
                            Source Code:
                        <p class="hcenter">
                            <img src="./static/images/qr.png" align="absmiddle" /><a href="http://goo.gl/TndU8" target="_blank">http://goo.gl/TndU8</a></span>
                            <br/>
                            <br/><a href="http://programa-con-google.blogspot.com/" target="_blank">http://programa-con-google.blogspot.com/</a>
                        </p>
                        </p>
                        <p class="hcenter">
                            Press <span class="key">→</span> to advance.
                        </p>
                    </div>
                </section>
            </div>
            <!--
            *
            * Presentation Agenda
            *
            -->
            <div class="slide">
                <header>
                    Agenda
                </header>
                <section class="hbox boxcenter">
                    <div class="noflex vbox boxcenter">
                        <ul>
                            <li>
                                The Road to <span class="html5">HTML5</span>
                            </li>
                            <li>
                                <span class="html5">HTML5</span> and Google Chrome
                            </li>
                            <li>
                                <span class="html5">HTML5</span> Primer + Building an <span class="html5">HTML5</span> Application
                            </li>
                            <li>
                                Demos
                            </li>
                            <li>
                                Key Take-Aways
                            </li>
                            <li>
                                Developer Resources
                            </li>
                            <li>
                                Q&amp;A
                            </li>
                        </ul>
                    </div>
                </section>
            </div>
            <!--
            *
            * Timeline of HTML5 features
            *
            -->
            <div class="slide vbox clickable" id="slide-timeline">
                <header>
                    Timeline of Web Development
                </header>
                <section class="flex" >
                    <div class="hbox timelineSlider hidden">
                        <div year="1990" top="1500" class="html">
                            First web page
                        </div>
                        <div year="1994" top="1350" class="html">
                            HTML 2
                        </div>
                        <div year="1995" top="1200" class="js">
                            JavaScript
                        </div>
                        <div year="1996" top="1050" class="css">
                            CSS 1
                        </div>
                        <div year="1997" top="900" class="html">
                            HTML 4
                        </div>
                        <div year="1998" top="750" class="css">
                            CSS 2
                        </div>
                        <div year="1999" top="600" class="js">
                            XMLHTTP
                        </div>
                        <div year="2002" top="450" class="js">
                            XmlHttpRequest
                        </div>
                        <div year="2005" top="300" class="js">
                            AJAX
                        </div>
                        <div year="2009" top="150" class="html html5">
                            HTML 5
                        </div>
                    </div>
                </section>
            </div>
            <script>
                $(window).bind('load', function() {
                    var slide = document.getElementById('slide-timeline');
                    $(slide).find('.hidden').removeClass('hidden');
                    var tl = new TimeLine(slide);
                });
            </script>
            <!--
            *
            * HTML is...
            *
            -->
            <div class="slide clickable" id="slide-physics">
                <section class="hidden">
                    <div class="physicsText">
                        What is...
                    </div>
                    <div class="physicsText">
                        &#8220;
                    </div>
                    <div class="physicsText">
                        &#8221;
                    </div>
                    <div class="physicsText">
                        ...built on?
                    </div>
                    <div class="physicsBox html">
                        Device Element
                    </div>
                    <div class="physicsBox css">
                        CSS Transforms
                    </div>
                    <div class="physicsBox js">
                        Web Sockets
                    </div>
                    <div class="physicsBox js">
                        Canvas 2D
                    </div>
                    <div class="physicsBox html">
                        Microdata
                    </div>
                    <div class="physicsBox js">
                        Web Workers
                    </div>
                    <div class="physicsBox css">
                        CSS Transitions
                    </div>
                    <div class="physicsBox js">
                        Geolocation
                    </div>
                    <div class="physicsBox js">
                        Web Storage
                    </div>
                    <div class="physicsBox css">
                        CSS3
                    </div>
                    <div class="physicsBox html">
                        Audio
                    </div>
                    <div class="physicsBox css">
                        Web Fonts
                    </div>
                    <div class="physicsBox js">
                        Notifications
                    </div>
                    <div class="physicsBox html">
                        Video
                    </div>
                    <div class="physicsBox js">
                        WebGL
                    </div>
                    <div class="physicsBox html">
                        SVG
                    </div>
                    <div class="physicsBox html">
                        <span class="html5">HTML5</span> Spec
                    </div>
                    <div class="physicsBoxMask">
                        HTML5
                    </div>
                    <section>
            </div>
            <script>
                $(window).bind('load', function() {
                    var slide = document.getElementById('slide-physics');
                    $(slide).find('.hidden').removeClass('hidden');
                    var pb = new PhysicsBox(slide);
                });
            </script>
            <!--
            *
            * Current Status
            *
            -->
            <div class="slide">
                <header>
                    Google Chrome: Where are we now?
                </header>
                <section class="hbox boxcenter">
                    <div class="noflex vbox boxcenter">
                        <img src="static/images/chromestats.png" />
                        <ul>
                            <li>
                                <strong>70+</strong> million users
                            <li>
                                <strong>28</strong> stable releases or updates
                            <li>
                                <strong>300%</strong> JavaScript performance improvement
                            <li>
                                <strong>HTML5</strong> support for web application development
                        </ul>
                    </div>
                </section>
            </div>
            <!--
            *
            * HTML5 APIs
            *
            -->
            <div class="slide">
                <header>
                    HTML5 - Making the Web More Powerful
                </header>
                <section>
                    <img src="static/images/html5_apis.png" />
                </section>
            </div>
            <!--
            *
            * SECTION: HTML semantics
            *
            -->
            <div class="slide transitionSlide">
                <section class="flex hbox boxcenter">
                    <div class="noflex vbox boxcenter">
                        <div class="section">
                            Section 0
                        </div>
                        <h2>Semantics & Markup</h2>
                        <p>
                            New elements for playing
                        </p>
                    </div>
                </section>
            </div>
            <!--
            *
            * SECTION: Better semantic tags
            *
            -->
        <div class="slide"> 
          <header>Better semantic tags</header> 
          <section> 
            <style> 
              #semantic-tags {
                font-size: 18px;
              }
            </style> 
            <pre id="semantic-tags" class="two-column">&lt;body&gt;
  &lt;<b>header</b>&gt;
    &lt;<b>hgroup</b>&gt;
      &lt;h1&gt;Page title&lt;/h1&gt;
      &lt;h2&gt;Page subtitle&lt;/h2&gt;
    &lt;/hgroup&gt;
  &lt;/header&gt;
 
  &lt;<b>nav</b>&gt;
   &lt;ul&gt;
     Navigation...
   &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;<b>section</b>&gt;
   &lt;<b>article</b>&gt;
     &lt;<b>header</b>&gt;
       &lt;h1&gt;Title&lt;/h1&gt;
     &lt;/header&gt;
     &lt;section&gt;
       Content...
     &lt;/section&gt;
   &lt;/article&gt;
   &lt;article&gt;
     &lt;header&gt;
       &lt;h1&gt;Title&lt;/h1&gt;
     &lt;/header&gt;
     &lt;section&gt;
       Content...
     &lt;/section&gt;
   &lt;/article&gt;
  &lt;/section&gt;
 
  &lt;<b>aside</b>&gt;
   Top links...
  &lt;/aside&gt;
 
  &lt;<b>figure</b>&gt;
    &lt;img src="..."/&gt;
    &lt;<b>figcaption</b>&gt;Chart 1.1&lt;/figcaption&gt;
  &lt;/figure&gt;
 
  &lt;<b>footer</b>&gt;
   Copyright &copy;<br>   &lt;<b>time</b> <b>datetime</b>="2010-11-08"&gt;2010&lt;/time&gt;.
  &lt;/footer&gt;
&lt;/body&gt;
</pre> 
          </section> 
        </div> 
             <!--
            *
            * SECTION: Markup for applications
            *
            -->
        <div class="slide"> 
          <header>Markup for applications</header> 
          <section> 
            <style> 
              #markup-tags {
                font-size: 16px;
              }
            </style> 
            <pre id=markup-tags ""> 
&lt;input <b>list</b>="cars"/&gt;
&lt;<b>datalist</b> id="cars"&gt;
  &lt;option value="BMW"/&gt;
  &lt;option value="Ford"/&gt;
  &lt;option value="Volvo"/&gt;
&lt;/datalist&gt;
 
&lt;<b>menu</b>&gt;
  &lt;<b>command</b> type="command"&gt;Click Me!&lt;/command&gt;
&lt;/menu&gt;
 
&lt;<b>details</b>&gt;
  &lt;<b>summary</b>&gt;HTML 5&lt;/summary&gt;
  This slide deck teaches you everything you need to know about HTML 5.
&lt;/details&gt;
</pre> 
 
<pre>&lt;<b>meter</b> <b>min</b>="0" <b>max</b>="100" <b>low</b>="40" <b>high</b>="90" <b>optimum</b>="100" value="91"&gt;A+&lt;/<b>meter</b>&gt;
Your score is: <meter value="91" min="0" max="100" low="40" high="90" optimum="100">A+</meter><br> 
&lt;<b>progress</b>&gt;working...&lt;/<b>progress</b>&gt;
Download is: <progress>working...</progress><br> 
&lt;<b>progress</b> value="75" <b>max</b>="100"&gt;3/4 complete&lt;/<b>progress</b>&gt;
Goal is: <progress value="75" max="100">3/4 complete</progress> 
</pre> 
 
          </section> 
        </div> 
              <!--
            *
            * SECTION: Descriptive link relations
            *
            -->
        <div class="slide"> 
          <header>Descriptive link relations</header> 
          <style> 
            .underlined { text-decoration: underline; }
          </style> 
          <section> 
            <pre>&lt;link rel="alternate" type="application/rss+xml" href="http://myblog.com/feed"/&gt;
&lt;link <b>rel="icon"</b> href="/favicon.ico"/&gt;
&lt;link <b>rel="pingback"</b> href="http://myblog.com/xmlrpc.php"/&gt;
&lt;link <b>rel="prefetch"</b> href="http://myblog.com/main.php"/&gt;
...
 
&lt;a <b>rel="archives"</b> href="http://myblog.com/archives"&gt;<span class="underlined">old posts</span>&lt;/a&gt;
&lt;a <b>rel="external"</b> href="http://notmysite.com"&gt;<span class="underlined">tutorial</span>&lt;/a&gt;
&lt;a <b>rel="license"</b> href="http://www.apache.org/licenses/LICENSE-2.0"&gt;<span class="underlined">license</span>&lt;/a&gt;
&lt;a <b>rel="nofollow"</b> href="http://notmysite.com/sample"&gt;<span class="underlined">wannabe</span>&lt;/a&gt;
&lt;a <b>rel="tag"</b> href="http://myblog.com/category/games"&gt;<span class="underlined">games posts</span>&lt;/a&gt;
...
</pre> 
 
          </section> 
        </div> 
 
        <div class="slide"> 
          <style> 
            #microdata-screenshot {
              width: 84%;
              margin: 30px auto;
              display: block;
              border: 3px solid #ccc;
            }
          </style> 
          <header>Microdata</header><br/>
 
          <section> 
            <pre>&lt;div <b>itemscope itemtype="http://example.org/band"</b>&gt;
 &lt;p&gt;My name is &lt;span <b>itemprop="name"</b>&gt;Neil&lt;/span&gt;.&lt;/p&gt;
 &lt;p&gt;My band is called &lt;span <b>itemprop="band"</b>&gt;Four Parts Water&lt;/span&gt;.&lt;/p&gt;
 &lt;p&gt;I am &lt;span <b>itemprop="nationality"</b>&gt;British&lt;/span&gt;.&lt;/p&gt;
&lt;/div&gt;
</pre> 
 
            <a href="http://www.google.com/webmasters/tools/richsnippets?url=http%3a%2f%2fplayingwithcode.googlecode.com%2fsvn%2ftrunk%2fmadpixel.html" target="_blank">Test Rich Snippets</a> 
          </section> 
        </div> 
                
 
              <!--
            *
            * SECTION: New form types
            *
            -->
        <div class="slide"> 
          <header>New form types</header> 
 <br/>
          <section> 
            <style> 
              #newform-tags {
                font-size: 16px;
              }
            .form-inputs {
              font-size: 16px;
            }
            .form-inputs input {
              border: 1px solid #CCC;
              -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px inset;
              -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px inset;
              -o-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px inset;
              box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px inset;
              padding: 3px 5px;
            }
            input:invalid {
              border-color: #e88;
              -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px inset, 0 0 5px rgba(255, 0, 0, .8);
              -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px inset, 0 0 5px rgba(255, 0, 0, .8);
              -o-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px inset, 0 0 5px rgba(255, 0, 0, .8);
              box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px inset, 0 0 5px rgba(255, 0, 0, .8);
            }
            input[required] {
              border-color: #88a;
              -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px inset, rgba(0, 0, 255, 0.5) 0px 0px 3px;
              -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px inset, rgba(0, 0, 255, 0.5) 0px 0px 3px;
              -o-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px inset, rgba(0, 0, 255, 0.5) 0px 0px 3px;
              box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px inset, rgba(0, 0, 255, 0.5) 0px 0px 3px;
            }
            </style> 
            <pre id="newform-tags">&lt;style&gt;
  :invalid { 
    border-color: #e88;
    -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
  }
  [required] {
    border-color: #88a;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 255, .5);
  }
&lt;/style&gt;
</pre> 
<pre class="form-inputs"> 
&lt;input type="text" <b>required</b> /&gt;<input type="text" required /> 
&lt;input type="<b>email</b>" value="some@email.com" /&gt; <input type="email" value="some@email.com" /> 
&lt;input type="<b>date</b>" <b>min</b>="2010-08-14" <b>max</b>="2011-08-14" value="2010-08-14"/&gt; <input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14" /> 
&lt;input type="<b>range</b>" <b>min</b>="0" <b>max</b>="50" value="10" /&gt; <input  type="range" min="0" max="50" value="10" /> 
&lt;input type="<b>search</b>" <b>results</b>="10" <b>placeholder</b>="Search..." /&gt; <input results="10" type="search" placeholder="Search..." /> 
&lt;input type="<b>tel</b>" placeholder="(555) 555-5555" <b>pattern</b>="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" /&gt;
<input type="tel" placeholder="(555) 555-5555" pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" /> 
&lt;input type="<b>color</b>" <b>placeholder</b>="e.g. #bbbbbb" /&gt; <input type="color" placeholder="e.g. #bbbbbb" /> 
&lt;input type="<b>number</b>" <b>step</b>="1" <b>min</b>="-5" <b>max</b>="10" value="0" /&gt; <input type="number" step="1" min="-5" max="10" value="0" /> 
</pre> 
          </section> 
        </div> 
 
 
        <div class="slide transitionSlide"> 
          <section class="middle"> 
            <h2>Graphics / Multimedia</h2> 
            <p>2D &amp; 3D</p> 
          </section> 
        </div> 
            <!--
            *
            * SECTION: Canvas
            *
            -->
            <div class="slide transitionSlide">
                <section class="flex hbox boxcenter">
                    <div class="noflex vbox boxcenter">
                        <div class="section">
                            Section 1
                        </div>
                        <h2>The canvas element</h2>
                        <p>
                            Low level control over rendering
                        </p>
                    </div>
                </section>
            </div>
            <!--
            *
            * Canvas code samples
            *
            -->
            <div class="slide">
                <header>
                    Coding on the Canvas
                </header>
                <section>
                    <div>
                        <pre>var canvas = document.getElementById("canvas2d");
var context = canvas.<b>getContext</b>("2d");</pre>
                        <div class="hbox">
                            <img class='canvasCodeIcon' draggable="false" src="static/images/line.png"/>
                            <div class="flex vbox boxcenter">
                                <pre>context.<b>moveTo</b>(x1, y1);
context.<b>lineTo</b>(x2, y2);</pre>
                            </div>
                        </div>
                        <div class="hbox">
                            <img class='canvasCodeIcon' draggable="false" src="static/images/circle.png" />
                            <div class="flex vbox boxcenter">
                                <pre>context.<b>arc</b>(x, y, r, Math.PI * 1/2, Math.PI * 3/2, false);</pre>
                            </div>
                        </div>
                        <div class="hbox">
                            <img class='canvasCodeIcon' draggable="false" src="static/images/brush.png" />
                            <div class="flex vbox boxcenter">
                                <pre>var id = context.<b>getImageData</b>(0, 0, width, height).<b>data</b>;
var r = id[0], g = id[1], b = id[2], a = id[3] / 255;</pre>
                            </div>
                        </div>
                        <pre>context.<b>lineWidth</b> = 20;
context.<b>lineCap</b> = "round";
context.<b>strokeStyle</b> = "rgba(255, 0, 0, 0.7)";
context.<b>stroke</b>();</pre>
                    </div>
                </section>
            </div>             <!--
            *
            * Canvas drawing examples
            *
            -->
            <div class="slide" id="slide-drawing">
                <header>
                    Drawing on the Canvas
                </header>
                <section>
                    <div class="hcenter">
                        <img draggable="false" id="drawingLine" class="clickable canvasIcon" src="static/images/line.png" />
                        <img draggable="false" id="drawingCircle" class="clickable canvasIcon" src="static/images/circle.png" />
                        <img draggable="false" id="drawingPixels" class="clickable canvasIcon" src="static/images/brush.png" />
                    </div>
                    <canvas id="drawingCanvas" class="drawingCanvas" width="830" height="350">
                    </canvas>
                </section>
            </div>
            <script>
                $(document).ready( function() {
                    var slide = $('#slide-drawing');
                    var canvasDom = $('#drawingCanvas');
                    var canvasDemo = new CanvasDemo(canvasDom.get(0));
                    $('#drawingLine').click($.proxy(canvasDemo, 'drawLine'));
                    $('#drawingCircle').click($.proxy(canvasDemo, 'drawCircle'));
                    $('#drawingPixels').click($.proxy(canvasDemo, 'drawPixels'));
                    canvasDom.click($.proxy(canvasDemo, 'clear'));
                });
            </script>
            <!--
            *
            * Canvas animation
            *
            -->
            <div class="slide">
                <header>
                    Canvas animation
                </header>
                <section>
                    <script>
                        var canvasAnimationInterval = null;
                        var canvasAnimationStep = 0;
                        var canvasAnimationImage = null;

                        function canvasStopRotation() {
                            window.clearInterval(canvasAnimationInterval);
                            canvasAnimationInterval = null;
                        };

                        function canvasStepRotation(context) {
                            var image = canvasAnimationImage;
                            if (canvasAnimationStep > 1000) {
                                canvasAnimationStep = 0;
                                canvasStopRotation();
                                return;
                            }
                            canvasAnimationStep += 15;
                            context.save();
                            context.clearRect(0, 0, context.canvas.width, context.canvas.height);
                            context.translate(context.canvas.width / 2, context.canvas.height / 2);
                            context.rotate(canvasAnimationStep * Math.PI/180);
                            context.drawImage(image, 0 - image.width / 2, 0 - image.height / 2, image.width, image.height);
                            context.restore();
                        };

                        function canvasRotatePuzzle() {
                            if (canvasAnimationInterval != null) {
                                canvasStopRotation();
                                return;
                            }

                            var canvas = document.getElementById('canvas2danimation');
                            var context = canvas.getContext('2d');
                            canvasAnimationInterval = window.setInterval(canvasStepRotation, 30, context);
                        };
                    </script>
                    <div class="hcenter">
                        <canvas id="canvas2danimation" width="350" height="320">
                        </canvas>
                    </div>
                    <div class="hcenter">
                        <img draggable="false" onclick="canvasRotatePuzzle();" class="clickable" src="static/images/animatedpuzzle.png" />
                    </div>
                    <script>
                        canvasAnimationImage = new Image();
                        canvasAnimationImage.src = 'static/images/puzzle.png';
                        canvasAnimationImage.addEventListener('load', function() {
                            var canvas = document.getElementById('canvas2danimation');
                            var context = canvas.getContext('2d');
                            context.drawImage(canvasAnimationImage, 25, 25);
                        }, false);
                    </script>
                </section>
            </div>
            <!--
            *
            * WebGL
            *
            -->
            <div class="slide" id="slide-webgl">
                <header>
                    Canvas 3D (WebGL)
                </header>
                <section>
                    <pre>&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
&lt;script&gt;
  var gl = document.getElementById("canvas").<b>getContext</b>("experimental-webgl");
  gl.<b>viewport</b>(0, 0, canvas.width, canvas.height);
&lt;/script&gt;</pre>
                    <div class="hcenter">
                        <button class="startButton">
                            Start
                        </button>
                        <button class="stopButton hidden">
                            Stop
                        </button>
                    </div>
                    <iframe src="static/webgl/webgl.html" width="600" height="330">
                    </iframe>
                </section>
            </div>
            <script>
                $(document).ready( function() {
                    $('#slide-webgl .startButton').click( function() {
                        $('#slide-webgl iframe').get(0).contentWindow.postMessage({action:'start'}, '*');
                        $('#slide-webgl .startButton').addClass('hidden');
                        $('#slide-webgl .stopButton').removeClass('hidden');
                    });
                    $('#slide-webgl .stopButton').click( function() {
                        $('#slide-webgl iframe').get(0).contentWindow.postMessage({action:'stop'}, '*');
                        $('#slide-webgl .startButton').removeClass('hidden');
                        $('#slide-webgl .stopButton').addClass('hidden');
                    });
                });

            </script>
            <!--
            *
            * SECTION: Multimedia
            *
            -->
            <div class="slide transitionSlide">
                <section class="flex hbox boxcenter">
                    <div class="noflex vbox boxcenter">
                        <div class="section">
                            Section 2
                        </div>
                        <h2>Multimedia</h2>
                        <p>
                            A richer experience with sound and video
                        </p>
                    </div>
                </section>
            </div>
            <!--
            *
            *  Video and audio
            *
            -->
            <div class="slide">
                <header>
                    Going Multimedia with Audio and Video
                </header>
                <section class="flex vbox boxcenter">
                    <h2>Audio</h2>
                    <pre>&lt;<b>audio</b> src="sound.ogg" <em>controls</em>&gt;&lt;/<b>audio</b>&gt;
&lt;script&gt;
  document.getElementById("audio").<em>muted</em>=false;
&lt;/script&gt;</pre>
                    <h2>Video</h2>
                    <pre>&lt;<b>video</b> src='movie.webm' <em>autoplay</em> <em>controls</em> &gt;&lt;/<b>video</b>&gt;
&lt;script&gt;
  document.getElementById("video").<em>play</em>();
&lt;/script&gt;</pre>
                </section>
            </div>
            <!--
            *
            *  Video tag demo
            *
            -->
            <div class="slide" id="slide-video">
                <header>
                    Video as a First Class Element
                </header>
                <section class="flex vbox boxcenter">
                    <div class="videoControls">
                        <button class="playButton">
                            Play
                        </button>
                        <button class="stopButton">
                            Stop
                        </button>
                        <button class="cssButton">
                            Make Fancy
                        </button>
                        <button class="cssButton2">
                            Make Fancy 2
                        </button>
                        <button class="effectButton">
                            Make Really Fancy
                        </button>
                    </div>
                    <div class="videoContent">
                        <video src="static/video/chrome_japan_small.mp4" controls="">
                            Your browser does not support the video tag
                        </video>
                    </div>
                </section>
            </div>
            <script>
                $(document).ready( function() {
                    var vc = new VideoController(document.getElementById('slide-video'));
                });
            </script>
            <!--
            *
            * SECTION: Processing
            *
            -->
            <div class="slide transitionSlide">
                <section class="flex hbox boxcenter">
                    <div class="noflex vbox boxcenter">
                        <div class="section">
                            Section 3
                        </div>
                        <h2>Processing</h2>
                        <p>
                            Storing and processing complex data
                        </p>
                    </div>
                </section>
            </div>
            <!--
            *
            * localStorage
            *
            -->
            <div class="slide">
                <header>
                    Storing Data on the Client
                </header>
                <section class="fixedtop">
                    <pre>var <em>loadedCount</em> = parseInt(<b>localStorage['loadedCount']</b> || '0') + 1;
<b>localStorage['loadedCount']</b> = <em>loadedCount</em>;
document.getElementById('displayLoadedCount').innerHTML = <em>loadedCount</em>;</pre>
                </section>
                <section>
                    <p class="callout localStorageText">
                        You've viewed this presentation on this computer
                        <strong id="displayLoadedCount">X</strong> times.
                    </p>
                </section>
            </div>
            <script>
                var loadedCount = parseInt(localStorage['loadedCount'] || '0') + 1;
                localStorage['loadedCount'] = loadedCount;
                document.getElementById('displayLoadedCount').innerHTML = loadedCount;
            </script>
            <!--
            *
            * Web Databases
            *
            -->
            <div class="slide">
                <header>
                    Other Storage Options
                </header>
                <section>
                    <h2>Web SQL DB:</h2>
                    <pre>var db = window.<b>openDatabase</b>("Database Name", "Database Version");
db.<b>transaction</b>(function(tx) {
  tx.<b>executeSql</b>(<em>"SELECT * FROM author"</em>, [], successCallback, errorCallback);
});</pre>
                </section>
                <section>
                    <h2>Other:</h2>
                    <div class="hbox boxcenter">
                        <div class='otherStorage'>
                            <img src="static/images/storage-indexdb.png" />
                            <br/>
                            Indexed DB
                        </div>
                        <div class='otherStorage'>
                            <img src="static/images/storage-fileapi.png" />
                            <br/>
                            File API
                        </div>
                        <div class='otherStorage'>
                            <img src="static/images/storage-appcache.png" />
                            <br/>
                            App Cache
                        </div>
                    </div>
                </section>
            </div>
            <!--
            *
            * Web Databases
            *
            -->
            <div class="slide">
                <header>
                    Web SQL DB Sample
                </header>
                <section>
                    <pre>var db = window.<b>openDatabase</b>("MyDatabaseTest", "1.0",5*1024*1024); // 5MB
db.<b>transaction</b>(function(tx) {
  tx.<b>executeSql</b>(<em>"SELECT * FROM MyTableTest"</em>, [], successCallback, errorCallback);
});</pre>
                </section>
                <section>
                    <input type="text" id="todoitem" />
                    <button onclick="newRecord()">
                        new to do item
                    </button>
                    <button onclick="createTable()">
                        create table
                    </button>
                    <button onclick="dropTable()">
                        drop table
                    </button>
                    <ul class="record-list" id="db-results">
                    </ul>
                    <div id="db-log">
                    </div>
                    <script>
                        var db;
                        var log = document.getElementById('db-log');
                        if (window.openDatabase) {
                            db = openDatabase("MyDatabaseTest", "1.0", "HTML5 Database API example", 200000);
                            showRecords();
                        }
                        document.getElementById("db-results").addEventListener('click', function(e) {
                            e.preventDefault();
                        }, false);
                        function onError(tx, error) {
                            log.innerHTML = '<p class="error">Error: ' + error.message + '</p>';
                        }

                        // select all records and display them
                        function showRecords() {
                            document.getElementById('db-results').innerHTML = '';
                            db.transaction( function(tx) {
                                tx.executeSql("SELECT * FROM MyTableTest", [], function(tx, result) {
                                    for (var i = 0, item = null; i < result.rows.length; i++) {
                                        item = result.rows.item(i);
                                        document.getElementById('db-results').innerHTML +=
                                        '<li><span contenteditable="true" onkeyup="updateRecord('+item['id']+', this)">'+
                                        item['text'] + '</span> <a href="#" onclick="deleteRecord('+item['id']+')">[Delete]</a></li>';
                                    }
                                });
                            });
                        }

                        function createTable() {
                            db.transaction( function(tx) {
                                tx.executeSql("CREATE TABLE MyTableTest (id REAL UNIQUE, text TEXT)", [], function(tx) {
                                    log.innerHTML = '<p>MyTableTest created!</p>'
                                },
                                onError);
                            });
                        }

                        // add record with random values
                        function newRecord() {
                            var num = Math.round(Math.random() * 10000); // random data
                            db.transaction( function(tx) {
                                tx.executeSql("INSERT INTO MyTableTest (id, text) VALUES (?, ?)", [num, document.querySelector('#todoitem').value], function(tx, result) {
                                    log.innerHTML = '';
                                    showRecords();
                                },
                                onError);
                            });
                        }

                        function updateRecord(id, textEl) {
                            db.transaction( function(tx) {
                                tx.executeSql("UPDATE MyTableTest SET text = ? WHERE id = ?", [textEl.innerHTML, id], null, onError);
                            });
                        }

                        function deleteRecord(id) {
                            db.transaction( function(tx) {
                                tx.executeSql("DELETE FROM MyTableTest WHERE id=?", [id], function(tx, result) {
                                    showRecords()
                                },
                                onError);
                            });
                        }

                        // delete table from db
                        function dropTable() {
                            db.transaction( function(tx) {
                                tx.executeSql("DROP TABLE MyTableTest", [], function(tx) { showRecords(),log.innerHTML = '<p>MyTableTest dropped!</p>'
                                },
                                onError);
                            });
                        }
                    </script>
                </section>
                <section>
                    <p  style="font-size: 14px;color: #000;">
                        See the generated database: Developer > Developer Tools > Storage
                    </p>
                </section>
            </div>
            <!--
            *
            * Worker threads
            *
            -->
            <div class="slide far-past" id="slide-worker">
                <header>
                    Working Hard with Worker Threads
                </header>
                <section>
                    <pre><em>main.js:</em>
var worker = new <b>Worker</b>(‘extra_work.js');
worker.<b>onmessage</b> = function (event) { alert(event.data); };
<em>extra_work.js:</em>
<b>postMessage</b>(some_data);</pre>
                    <div class="hbox boxcenter">
                        <div class="vbox flex">
                            <p>
                                <strong>Paint here</strong>
                                <button class='clearButton'>
                                    Clear
                                </button>
                            </p>
                            <canvas class='workerCanvas drawingCanvas' width='400' height='280'>
                            </canvas>
                        </div>
                        <div class="vbox noflex">
                            <p>
                                <strong>Difference</strong>
                                <button class='diffCheckbox'>
                                    Use worker
                                </button>
                            </p>
                            <canvas class='workerDiff drawingCanvas' width='400' height='280'>
                            </canvas>
                        </div>
                    </div>
                </section>
            </div>

            <!--
            *
            * Worker threads II (Web Workers)
            *
            -->
         <div class="slide">
          <style>
            #wmap {
              height: 200px;
            }
            #w-loading {
              visibility: hidden;
              display: inline;
              background-color: red;
              color: white;
              padding: 5px;
              border-radius: 5px;
            }
          </style>
          <header>Web Workers</header>
          <section>
<pre style="font-size: 14px;">
main.js:	
var worker = new <b>Worker</b>('task.js');
worker.<b>onmessage</b> = function(event) { alert(event.data); };
worker.<b>postMessage</b>('data');
task.js:
self.<b>onmessage</b> = function(event) {
  // Do some work.
  self.<b>postMessage</b>("recv'd: " + event.data);
};
</pre>

        <div id="w-wrapper">
          <iframe src="workers.html" style="border:0" width="780" height="280"></iframe>
		          <section>
                    <p  style="font-size: 14px;color: #000;">
                        Try dragging the map while the complex route is being calculated (you will only be able to do that with Workers!)
                    </p>
                </section>
        </div>
        <script src="src/webworkers/points.js"></script>
        <script src="src/webworkers/annealing.js"></script>
        <script>
        (function() {
          var markersArray = [];
          var map = null;
          var useThreads = false;

          document.querySelector('#w-wrapper').addEventListener('click', function(event) {
            if (!map) {
              map = new google.maps.Map(document.querySelector('#wmap'), {
                zoom: 3,
                center: new google.maps.LatLng(13, 13),
                mapTypeId: google.maps.MapTypeId.ROADMAP
              });
              map.getDiv().style.border =  '1px solid #ccc';
              drawPoints();
            }

            if (event.target.id == 'find-route-y') {
              useThreads = true;
              document.querySelector('#w-loading').style.visibility = 'visible';
              test();
            } else if (event.target.id == 'find-route-n'){
              useThreads = false;
              document.querySelector('#w-loading').style.visibility = 'visible';
              // this setTimout is so that we see the 'loading' label
              setTimeout(function() { test(); }, 10);
            }
          }, false);

          function drawPath(path) {
            var firstPoint = true;
            var l = p1.length;
            var scaleFactor = 5;
            for (var i = 0; i < l - 1; ++i) {
              var points = [
                new google.maps.LatLng(p1[i].x / scaleFactor,
                                       p1[i].y / scaleFactor),
                new google.maps.LatLng(p1[i + 1].x / scaleFactor,
                                       p1[i + 1].y / scaleFactor)
              ];
              var polyline = new google.maps.Polyline(
                  {path: points, strokeColor: '#ff0000', strokeWeight: 1});
              markersArray.push(polyline);
              polyline.setMap(map);
            }
          }

          function drawPoints() {
            var blueIcon = new google.maps.MarkerImage(
                'src/webworkers/point.png',
                new google.maps.Size(3, 3), // size
                new google.maps.Point(0, 0), // origin
                new google.maps.Point(0, 0)); // anchor
            for (var i = 0; i < p1.length; ++i) {
              // Render in Gmap instead of canvas
              var point = new google.maps.LatLng(p1[i].x / 5, p1[i].y / 5);
              var marker = new google.maps.Marker({
                  position: point, icon: blueIcon, map: map});
              markersArray.push(marker);
            }
          }

          function deleteOverlays() {
            if (markersArray) {
              for (var i in markersArray) {
                markersArray[i].setMap(null);
              }
              markersArray = [];
            }
          }

          function test() {
            var name = "Test 1";
            var self = this;
            deleteOverlays();
            drawPoints();
            setTimeout(function() {
              var opts = {
                points: p1,
                t0: 1,
                g: 0.99,
                stepsPerT: 10
              };
              var callback = {
                name: name,
                newMin: function(p) {
                },
                draw: function(p) {
                  document.querySelector('#w-loading').style.visibility = 'hidden';
                  drawPath(p);
                }
              };
              var a;
              if (useThreads) {
                var worker = new Worker('src/webworkers/Worker.js')
                worker.onmessage = function(event) {
                  var returnedData = JSON.parse(event.data);
                  var msg = returnedData[0];
                  var p = returnedData[1];
                  callback[msg](p);
                };
                worker.onerror = function(event) {
                  console.log(event);
                };
                worker.postMessage(JSON.stringify({
                  opts: opts,
                  width: 200,
                  height: 200
                }));
              } else {
                var annealing = new Annealing();
                var callback2 = {
                  onNewMin: function(p) {
                    // postMessage('newmin')
                  },
                  onDone: function(p) {
                    document.querySelector('#w-loading').style.visibility = 'hidden';
                    drawPath(p);
                  }
                };
                annealing.init(opts, opts.width, opts.height, callback2);
                annealing.go();
              }
            }, 10);
          }
        })();
        </script>
        </section>
        </div>
            
            <!--
            *
            * SECTION: Desktop experience
            *
            -->
            <div class="slide transitionSlide">
                <section class="flex hbox boxcenter">
                    <div class="noflex vbox boxcenter">
                        <div class="section">
                            Section 4
                        </div>
                        <h2>Desktop Experience</h2>
                        <p>
                            Interacting with the client Operating System
                        </p>
                    </div>
                </section>
            </div>
            <!--
            *
            * Drag and Drop (internal control)
            *
            -->
            <div class="slide" id="slide-draganddrop">
                <header>
                    Dragging &amp; Dropping
                </header>
                <section class="noflex">
                    <pre>var elem = document.getElementById('dragElem');
elem.addEventListener(<b>'dragstart'</b>, ..., false);
elem.addEventListener(<b>'dragend'</b>, ..., false);
var target = document.getElementById('dragTarget');
target.addEventListener(<b>'dragenter'</b>, ..., false);
target.addEventListener(<b>'dragleave'</b>, ..., false);
target.addEventListener(<b>'dragover'</b>, ..., false);
target.addEventListener(<b>'drop'</b>, ..., false);</pre>
                </section>
                <section class="vbox boxcenter flex">
                    <div class="hcenter">
                        <img draggable="true" class="dragObject" src='static/images/animatedpuzzle.png'/>
                    </div>
                    <div class="hbox boxcenter flex">
                        <div class="dropTarget vbox boxcenter">
                            <strong>Drop here</strong>
                        </div>
                        <div class="dropTarget vbox boxcenter">
                            <strong>No, drop here</strong>
                        </div>
                    </div>
                </section>
            </div>
            <script>
                var slide = document.getElementById('slide-draganddrop');
                var dm = new DragManager();
                dm.addDragElements(slide.getElementsByClassName('dragObject'));
                dm.addDropElements(slide.getElementsByClassName('dropTarget'));
            </script>
            <!--
            *
            * Drag and Drop From the Desktop
            *
            -->
            <div class="slide" id="slide-draganddrop">
                <header>
                    Drag from the Desktop
                </header>
                <section class="noflex">
                    <pre>drophere.addEventListener("drop", function(e) {
  e.preventDefault();
  var files = <b>event.dataTransfer.files</b>;
  for(var i = 0, file; file = files[i]; i++) {
    var reader = new <b>FileReader</b>();
    reader.onload = (function(aFile) {
    return function(evt) {
      var data = <b>evt.target.result</b>;
      ...
    }; })(file);
    reader.readAsDataURL(file);
  }
});
</pre>
</section>
                <section class="vbox boxcenter flex">
                    <div class="hcenter" id="images">

                    </div>
                    <div class="hbox boxcenter flex">
                        <div class="dropTarget vbox boxcenter" id="drophere">
                            <strong>Drop image file here</strong>
                        </div>
                    </div>
                </section>
            </div>
            <script>

                (function() {
                    var drophere = document.getElementById("drophere");
                    var images = document.getElementById("images");

                    drophere.addEventListener("dragover", function(e) {
                        e.preventDefault();
                    });
                    drophere.addEventListener("drop", function(e) {
                        e.preventDefault();

                        var files = event.dataTransfer.files;

                        for(var i = 0, file; file = files[i]; i++) {
                            var reader = new FileReader();

                            reader.onload = (function(aFile) {
                                return function(evt) {
                                    var images = document.getElementById("images");
                                    var img = new Image();
                                    img.src = evt.target.result;
                                    images.appendChild(img);
                                };
                            })(file);
                            reader.readAsDataURL(file);
                        }
                    });
                })();

            </script>
            <!--
            *
            * Drag to the Desktop
            *
            -->
            <div class="slide" id="slide-draganddrop">
                <header>
                    Drag to the Desktop
                </header>
                <section class="vbox boxcenter flex">
                    <pre style="font-size:16px">var dragElement = document.getElementById("dragImage");
dragElement.addEventListener(
  "dragstart",
  function(e) {
    <b>e.dataTransfer.setData("DownloadURL","image/png:android.png:http://server.com/google.png");</b>
  },
false);</pre>
                </section>
                <section class="vbox boxcenter flex">
                    <div class="hcenter hbox boxcenter">
                        <div id="dragImage" draggable="true" class="dropTarget ">
                            Drag me!
                        </div>
                    </div>
                </section>
            </div>
            <script>

                (function() {
                    var dragElement = document.getElementById("dragImage");

                    dragElement.addEventListener(
                    "dragstart", function(e) {
                        e.dataTransfer.setData(
                        "DownloadURL","image/png:MyTest.png:http://playingwithcode.googlecode.com/svn/trunk/static/images/test.png");
                    },
                    false);

                })();
                (function() {
                    var drophere = document.getElementById("drophere");
                    var images = document.getElementById("images");

                    drophere.addEventListener("dragover", function(e) {
                        e.preventDefault();
                    });
                    drophere.addEventListener("drop", function(e) {
                        e.preventDefault();

                        var files = event.dataTransfer.files;

                        for(var i = 0, file; file = files[i]; i++) {
                            var reader = new FileReader();

                            reader.onload = (function(aFile) {
                                return function(evt) {
                                    var images = document.getElementById("images");
                                    var img = new Image();
                                    img.src = evt.target.result;
                                    images.appendChild(img);
                                };
                            })(file);
                            reader.readAsDataURL(file);
                        }
                    });
                })();

            </script>
            <!--
            *
            * Notifications
            *
            -->
            <div class="slide" id="slide-notifications">
                <header>
                    Look Who's Calling - Notifications
                </header>
                <section>
                    <pre>if (window.<b>webkitNotifications</b>.<b>checkPermission</b>() == 0) {
  window.<b>webkitNotifications</b>.<b>createNotification</b>(picture, title, text).<b>show</b>();
} else {
  window.<b>webkitNotifications</b>.<b>requestPermission</b>();
}</pre>
                    <p class="callout notificationText">
                        This presentation currently <strong class="displayBox">X</strong>
                        permission to display notifications.
                    </p>
                    <p class='hcenter'>
                        <button class='showButton'>
                            Show a notification
                        </button>
                        <button class='requestButton'>
                            Request permission
                        </button>
                    </p>
                </section>
            </div>
            <script>
                $(document).ready( function() {
                    var slide = document.getElementById('slide-notifications');
                    var nm = new NotificationManager(slide);
                });
            </script>

            <!--
            *
            * GeoLocation
            *
            -->            
        <div class="slide"> 
          <style> 
            #see-position {
              margin-bottom: 3px;
            }
            #geo-map {
              height: 280px;
            }
            #geo-log {
              background-color: red;
              color: white;
              padding: 2px;
              border-radius: 5px;
              visibility: hidden;
              font: 18px Arial;
            }
          </style> 
          <header>Geolocation</header><br/> 
          <section> 
<pre>if (<b>navigator</b>.<b>geolocation</b>) {
  <b>navigator</b>.<b>geolocation</b>.<b>getCurrentPosition</b>(function(position) {
    var latLng = new google.maps.LatLng(
        position.<b>coords</b>.<b>latitude</b>, position.<b>coords</b>.<b>longitude</b>);
    var marker = new google.maps.Marker({position: latLng, map: map});
    map.setCenter(latLng);
  }, errorHandler);
}
</pre> 
          <button id="see-position">Show Position</button> <span id="geo-log"></span> 
          <div id="geo-map" class="gmap example"> 
            <img src="http://maps.google.com/maps/api/staticmap?center=37.4419,-94.1419&zoom=3&size=680x278&sensor=true"/> 
          </div> 
 
          <script> 
          (function() {
            var map = null;
            var geolog = document.querySelector('#geo-log');
            var geoMap = document.querySelector('#geo-map');
 
            function showPosition(position) {
              geolog.textContent = "You're within " + position.coords.accuracy +
                  " meters of (" + position.coords.latitude + ", " +
                  position.coords.longitude + ")";
              var latLng = new google.maps.LatLng(
                  position.coords.latitude, position.coords.longitude);
              var marker = new google.maps.Marker({
                position: latLng,
                map: map
              });
              map.setCenter(latLng);
              map.setZoom(15);
            }
 
            function handlePositionError(evt) {
              geolog.textContent = evt.message;
            }
 
            function successPositionHandler(evt) {
              // Load map if it doesn't already exist and when user clicks the button.
              if (!map) {
                map = new google.maps.Map(geoMap, {
                  zoom: 3,
                  center: new google.maps.LatLng(37.4419, -94.1419), // United States
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                });
                map.getDiv().style.border =  '1px solid #ccc';
              }
 
              if (navigator.geolocation) {
                geolog.style.visibility = 'visible';
                geolog.textContent = 'Looking for location...';
                navigator.geolocation.getCurrentPosition(showPosition, handlePositionError);
                // Also monitor position as it changes.
                //navigator.geolocation.watchPosition(showPosition, handlePositionError);
              } else {
                geolog.textContent = 'Oops! Your browser does not support geolocation.';
              }
            }
 
            document.querySelector('#see-position').addEventListener('click', successPositionHandler, false);
            geoMap.addEventListener('click', successPositionHandler, false);
          })();
          </script> 
          </section> 
        </div>         
            <!--
            *
            * SECTION: CSS
            *
            -->
            <div class="slide transitionSlide">
                <section class="flex hbox boxcenter">
                    <div class="noflex vbox boxcenter">
                        <div class="section">
                            Section 5
                        </div>
                        <h2>CSS Enhancements</h2>
                        <p>
                            Making things look good
                        </p>
                    </div>
                </section>
            </div>
            <!--
            *
            * Chromabrush Logo
            *
            -->
            <div class="slide" id="slide-logo">
                <header>
                    <span class="chromabrush">Chromabrush</span> Logo Creator
                </header>
                <section class="flex vbox boxcenter">
    <pre><b>font-family</b>: <span class="controls"><input checked="checked" type="radio" value="Molengo" name="logoFont" /> Molengo  <input type="radio" value="Droid Serif" name="logoFont" /> Droid Serif <input type="radio" value="Cantal" name="logoFont" /> Cantal <input type="radio" value="Lobster" name="logoFont" /> Lobster <input type="radio" value="Josefin Sans Std Light" name="logoFont" /> Josefin</span> 
 
<b>color</b>: <span id="logoColor"></span>; <span class="controls"><em>H</em>: <input id="logoHueSlider" type="range" min="0" max="255" value="215" /> <em>S</em>: <input id="logoSatSlider" type="range" min="0" max="100" value="50" /> <em>L</em>: <input id="logoLitSlider" type="range" min="0" max="100" value="0" /></span> 
<b>background-color</b>: <span id="logoBgColor"></span>; <span class="controls"><em>H</em>: <input id="logoBgHueSlider" type="range" min="0" max="255" value="50" /> <em>S</em>: <input id="logoBgSatSlider" type="range" min="0" max="100" value="50" /> <em>L</em>: <input id="logoBgLitSlider" type="range" min="0" max="100" value="100" /></span> 
 
<b>-webkit-box-reflect</b>: below 10px -webkit-gradient(
     linear, left top, left bottom,
     from(transparent), to(rgba(255, 255, 255, <span id="logoReflect">0</span>)));  <span class="controls"><em>Reflection</em>: <input id="logoReflectSlider" type="range" min="0" max="100" value="0" /></span> 
<b>text-shadow</b>: <span id="logoShadow"></span>;  <span class="controls"><em>Shadow</em>: <input id="logoShadowSlider" type="range" min="0" max="9" value="0" /></span> 
<b>border-radius</b>: <span id="logoRadius"></SPAN>; <span class="controls"><em>Radius</em>: <input id="logoRadiusSlider" type="range" min="0" max="50" value="0"></span></pre>                     <div class="hcenter">
                        <div id="logoOutput">
                            Chromabrush
                        </div>
                    </div>
                </section>
            </div>
            <script>
                function logoChangeFont(evt) {
                    $('#logoOutput').css('font-family', '"' + evt.target.value + '"');
                };

                function logoChangeColor(evt) {
                    var h = $('#logoHueSlider').val();
                    var s = $('#logoSatSlider').val();
                    var l = $('#logoLitSlider').val();
                    var color = "hsl(" + h + "," + s + "%," + l + "%)";
                    $('#logoOutput').css('color', color);
                    $('#logoColor').text(color);
                };

                function logoChangeBgColor(evt) {
                    var h = $('#logoBgHueSlider').val();
                    var s = $('#logoBgSatSlider').val();
                    var l = $('#logoBgLitSlider').val();
                    var color = "hsl(" + h + "," + s + "%," + l + "%)";
                    $('#logoOutput').css('background-color', color);
                    $('#logoBgColor').text(color);
                };

                function logoChangeReflect(evt) {
                    var r = $('#logoReflectSlider').val() / 100;
                    $('#logoOutput').css('-webkit-box-reflect',
                    "below 10px -webkit-gradient(linear, left top, left bottom, " +
                    "from(transparent), to(rgba(255, 255, 255, " + r + ")))");
                    $('#logoReflect').text(r);
                };

                function logoChangeShadow(evt) {
                    var s = $('#logoShadowSlider').val();
                    var css = "rgba(0, 0, 0, 0.9) 0 " + s + "px " + s + "px";
                    $('#logoOutput').css('text-shadow', css);
                    $('#logoShadow').text(css);
                };

                function logoChangeRadius(evt) {
                    var r = $('#logoRadiusSlider').val();
                    var css = r + "px";
                    $('#logoOutput').css('border-radius', css);
                    $('#logoRadius').text(css);
                };

                $(document).ready( function() {
                    $('#slide-logo input[type=radio]').bind('click', logoChangeFont);
                    $('#logoHueSlider').bind('change', logoChangeColor);
                    $('#logoSatSlider').bind('change', logoChangeColor);
                    $('#logoLitSlider').bind('change', logoChangeColor);
                    $('#logoBgHueSlider').bind('change', logoChangeBgColor);
                    $('#logoBgSatSlider').bind('change', logoChangeBgColor);
                    $('#logoBgLitSlider').bind('change', logoChangeBgColor);
                    $('#logoReflectSlider').bind('change', logoChangeReflect);
                    $('#logoShadowSlider').bind('change', logoChangeShadow);
                    $('#logoRadiusSlider').bind('change', logoChangeRadius);
                    logoChangeColor();
                    logoChangeBgColor();
                    logoChangeReflect();
                    logoChangeShadow();
                    logoChangeRadius();
                });
            </script>
            <!--
            *
            * Transforms
            *
            -->
            <div class="slide">
                <header>
                    Transforms &amp; Transitions
                </header>
                <section class="flex vbox boxcenter">
    <pre><b>-webkit-transform</b>: <em>rotate</em>(-10deg) <em>scale</em>(1.5);</pre> 
                    <table class='transformTable'>
                        <tr>
                            <th>rotate(-45deg)</th>
                            <th>rotate(-15deg)</th>
                            <th>rotate(15deg)</th>
                            <th>rotate(45deg)</th>
                            <th>rotate(75deg)</th>
                        </tr>
                        <tr>
                            <td>
                            <img class='rotate1' src='static/images/puzzle-sm.png' />
                            </td>
                            <td>
                            <img class='rotate2' src='static/images/puzzle-sm.png' />
                            </td>
                            <td>
                            <img class='rotate3' src='static/images/puzzle-sm.png' />
                            </td>
                            <td>
                            <img class='rotate4' src='static/images/puzzle-sm.png' />
                            </td>
                            <td>
                            <img class='rotate5' src='static/images/puzzle-sm.png' />
                            </td>
                        </tr>
                        <tr>
                            <th>scale(0.2)</th>
                            <th>scale(0.5)</th>
                            <th>scaleX(0.5)</th>
                            <th>scaleX(2.0)</th>
                            <th>scaleY(1.5)</th>
                        </tr>
                        <tr>
                            <td>
                            <img class='scale1' src='static/images/puzzle-sm.png' />
                            </td>
                            <td>
                            <img class='scale2' src='static/images/puzzle-sm.png' />
                            </td>
                            <td>
                            <img class='scale3' src='static/images/puzzle-sm.png' />
                            </td>
                            <td>
                            <img class='scale4' src='static/images/puzzle-sm.png' />
                            </td>
                            <td>
                            <img class='scale5' src='static/images/puzzle-sm.png' />
                            </td>
                        </tr>
                        <tr>
                            <th>skewX(10deg)</th>
                            <th>skewX(20deg)</th>
                            <th>skewX(30deg)</th>
                            <th>skewX(40deg)</th>
                            <th>skewX(50deg)</th>
                        </tr>
                        <tr>
                            <td>
                            <img class='skew1' src='static/images/puzzle-sm.png' />
                            </td>
                            <td>
                            <img class='skew2' src='static/images/puzzle-sm.png' />
                            </td>
                            <td>
                            <img class='skew3' src='static/images/puzzle-sm.png' />
                            </td>
                            <td>
                            <img class='skew4' src='static/images/puzzle-sm.png' />
                            </td>
                            <td>
                            <img class='skew5' src='static/images/puzzle-sm.png' />
                            </td>
                        </tr>
                    </table>
    <pre class="transitionExample">.myDiv { <b>-webkit-transition</b>: <em>-webkit-transform</em> 2s ease-in-out; }
 
.myDiv:hover { <em>-webkit-transform</em>: rotate(-20deg); }</pre> 
                </section>
            </div>
            <!--
            *
            * Transforms
            *
            -->
            <div class="slide" id="slide-animations">
                <header>
                    Animations
                </header>
                <section class="vbox flex boxcenter">
    <pre>@-webkit-<b>keyframes</b> <em>pulse</em> {
  <b>0%</b>   { -webkit-transform: scale(2) rotate(5deg); }
  <b>50%</b>  { -webkit-transform: scale(5) rotate(-15deg);  }
  <b>100%</b> { -webkit-transform: scale(2) rotate(5deg); }
}
 
div {
  -webkit-<b>animation-name</b>: <em>pulse</em>;
  -webkit-<b>animation-duration</b>: 2s;
  -webkit-<b>animation-iteration-count</b>: infinite;
  -webkit-<b>animation-timing-function</b>: ease-in-out;
  -webkit-<b>animation-direction</b>: alternate;
}</pre> 
                    <div class="hcenter">
                        <example class="animationExample">
                            Click Me!
                        </example>
                        <p class="disclaimer hidden">
                            *Please make a better use of it. We don't want a new &lt;blink&gt; tag ;)
                        </p>
                    </div>
                </section>
            </div>
            <script>
                $(document).ready( function() {
                    $('#slide-animations .animationExample').click( function() {
                        $(this).text('Pulse!').addClass('pulse');
                        $('#slide-animations .disclaimer').removeClass('hidden');
                    });
                });
            </script>
            <div class="slide">
                <header>
                    3d CSS
                </header>
                <section id="anim1">
                    <pre>
  &lt;style&gt;
    #anim1 {
      -webkit-perspective: 800;
      perspective: 800;
      margin: 100px 0 100px 50px;
    }

    #anim1 iframe {
      -webkit-transition: -webkit-transform 1s ease-in-out;
      -webkit-transform: rotate3d(0,1,1, 45deg);
      transition: transform 1s ease-in-out;
      transform: rotate3d(0,1,1, 45deg);
    }

    #anim1 iframe:hover {
      -webkit-transform: rotate3d(0,0,1, 45deg);
      transform: rotate3d(0,0,1, 45deg);
    }
  &lt;/style&gt;</pre>                </section>
                <section>
                    <div class="hcenter" >
                        <div class="demo">
                            demo
                        </div> <a href="http://html5samples.appspot.com/3dCubeembed.html" target="_blank">3D Cube </a>
                        </a>
                </section>
            </div>
            <!--
            *
            * Fonts
            *
            -->
<div class="slide"> 
  <header>Beautiful Fonts with <strong>@font-face</strong></header> 
  <section> 
    <pre><b>@font-face</b> {
  font-family: <em>'Molengo'</em>;
  src: local('Molengo'), url('fonts/Molengo.otf') format('opentype');
}
 
div { font-family: <em>'Molengo'</em>; }</pre> 
    <p id="ransomLetter">Stop abusing the pulse animation or else...</p> 
  </section> 
</div> 
<script> 
  var styles = {
    'font-family': [
        "'Molengo'", "'Yanone Kaffeesatz'", "'Droid Serif'", "'Cantal'",
        "'OFL Sorts Mill Goudy TT'", "'Inconsolata'", "'Lobster'",
        "'Josefin Sans Std Light'"
    ],
    '-webkit-transform': [
        'rotate(2deg)', 'rotate(-2deg)', 'rotate(0)', 'rotate(1deg)',
        'rotate(-1deg)', 'rotate(5deg)'
    ],
    'text-transform': [
        'uppercase', 'lowercase'
    ],
    'font-weight': [
        'bold', 'normal'
    ],
    'LITERAL': [
        'color: #fff; background: #000;', 'color: #000; background: #fff;'
    ]
  };
  function renderRansom() {
    var dom = $('#ransomLetter');
    var text = dom.text();
    var html = [];
    html.push("<div>");
    for (var i = 0; i < text.length; i++) {
      var styleText = [];
      for (var style in styles) {
        var randIndex = Math.floor(Math.random() * styles[style].length);
        if (style == 'LITERAL') {
          styleText.push(styles[style][randIndex], ' ');
        } else {
          styleText.push(style, ': ', styles[style][randIndex], '; ');
        }
      }
      if (text[i] == ' ') {
        html.push('</div>&nbsp;&nbsp;&nbsp;<div>');
      } else {
        html.push('<span style="', styleText.join(''), '">', text[i], '</span>');
      }
    }
    html.push('</div>');
    dom.html(html.join(''));
  };
  renderRansom();
</script> 
            <!--
            *
            * Flexible box model diagram
            *
            -->
            <div class="slide" id="slide-flexbox">
                <header>
                    Flexible Box Model
                </header>
                <section class="noflex">
                    <strong>Width:</strong>
                    <input id="flexboxWidth" type="range" min="200" max="500" value="300" />
                    <br/>
                    <strong>Height:</strong>
                    <input id="flexboxHeight" type="range" min="200" max="400" value="300" />
                </section>
                <section>
                    <div class="hbox boxcenter">
                        <div id="flexibleBox" class="hbox boxcenter">
                            <div class="boxA noflex">
                                &nbsp;
                            </div>
                            <div class="boxB flex vbox boxcenter">
                                <div class="boxD">
                                    &nbsp;
                                </div>
                            </div>
                            <div class="boxC noflex">
                                &nbsp;
                            </div>
                        </div>
                    </div>
                </section>
                <section class="noflex">
                    <info>
                        Now CSS supports <strong>100% height</strong> and <strong>vertical centering</strong>!
                    </info>
                </section>
            </div>
            <script>
                function setFlexboxDimensions() {
                    $('#flexibleBox')
                    .css('width', $('#flexboxWidth').val() + "px")
                    .css('height', $('#flexboxHeight').val() + "px");
                };

                $( function() {
                    $('#flexboxWidth').bind('change', setFlexboxDimensions);
                    $('#flexboxHeight').bind('change', setFlexboxDimensions);
                    setFlexboxDimensions();
                });
            </script>
            <!--
            *
            * HTML5 Goodies
            *
            -->
            <DIV class="slide">
                <header>
                    More HTML5 Goodies to Consider
                </header>
                <section>
                    <ul class="summary">
                        <li>
                            <strong>Application Cache</strong>
                            <ul>
                                <li>
                                    offline experience
                            </ul>
                        </li>
                        <li>
                            <strong>Web Sockets</strong>
                            <ul>
                                <li>
                                    multi-user scenarios (e.g. whiteboard)
                            </ul>
                        </li>
                        <li>
                            <strong>Geolocation</strong>
                            <ul>
                                <li>
                                    tag location information for drawings or users
                            </ul>
                        </li>
                        <li>
                            <strong>Supported Browsers</strong>
                            <ul>
                                <li>
                                   updated source: <a href="http://www.findmebyip.com/litmus" target="_blank">FindMeByIp</a> 
                            </ul>
                        </li>
                    </ul>
                </section>
            </div>
            <!--
            *
            * DEMOS
            *
            -->
            <div class="slide transitionSlide">
                <section class="flex hbox boxcenter">
                    <div class="noflex vbox boxcenter">
                        <div class="section">
                            Developer Resources
                        </div>
                        <h2>HTML5 ROCKS</h2>
                        <p>
                            <a href="http://www.html5rocks.com/" target="_blank">http://www.html5rocks.com/</a>
                        </p>
                        <h2>HTML5 TEST</h2>
                        <p>
                            <a href="http://html5test.com/" target="_blank">http://html5test.com</a>
                        </p>                        
                        <h2>PROGRAMA CON GOOGLE</h2>
                        <p>
                            <a href="http://programa-con-google.blogspot.com/" target="_blank">http://programa-con-google.blogspot.com/</a>
                        </p>
                    </div>
                </section>
            </div>            
            <!-- Key Take-Aways -->
            <div class="slide">
                <header>
                    Key Take-Aways
                </header>
                <section>
                    <ul class="summary">
                        <li>
                            HTML5 gaining momentum
                        </li>
                        <br/>
                        <li>
                            Browser innovation accelerating
                        </li>
                        <br/>
                        <li>
                            Parity with desktop apps
                        </li>
                        <br/>
                        <li>
                            Developer community participation essential
                        </li>
                    </ul>
                </section>
            </div>
            <!--
            *
            * Google I/O Logo Slide
            *
            -->
            <div class="slide far-past" style="background: #fff; ">
                <section class="center intro">
                    <img style="width: 70%; padding-top: 230px; " src="static/images/google_io_big.png" />
                    <img style="width: 100%; padding-top: 130px; " src="static/images/google_io_footer.png" />
                </section>
            </div>
        </div> <!-- slides -->
        </div> <!-- presentation -->         
    </body>

</html>